<template>
  <div class="wrap">
    <div class="head" v-if="shareUser">
      <img v-if="shareUser.headImgUrl" :src="shareUser.headImgUrl" alt="">
      <img v-else src="/static/default-head.png" alt="">
      <div class="name">{{shareUser.nickname}}</div>
      向你发来了求助
    </div>
    <!-- 题目展示区域 -->
    <div class="question-title" :class="{word:qType==3}" :data-title="subject.title">
      <div class="title-box">
        {{subject.title}}
      </div>
    </div>
    <!-- 图片提示 -->
    <div v-if="qType==1" class="question-img">
      <img :src="IMGHEAD+subject.image" :style="imgSize" alt="" @load="imgLoaded">
    </div>
    <!-- 音频提示 -->
    <questionAudio v-if="qType==2" :audioSrc="subject.audio" :isStop="isStop"></questionAudio>

    <!-- 填字 -->
    <fillWord v-if="subject&&sType==2" :subject="subject" :isTip="isTip" @getSuccess="successHandle" @getFail="failHandel"></fillWord>
    <!-- 选项 -->
    <selectOption v-if="subject&&sType==1" :subject="subject" :isTip="isTip" :isShare="true" :qType="qType" @getSuccess="successHandle" @isPass="isPass=true" @getFail="failHandel" @outEnergy="isEnergyBox=true"></selectOption>
    <!-- 答题结果弹窗 -->
    <shareAnswerBox v-if="isShareAnswerBox" :user="shareUser" :type="resultType" @rightClick="closeBox" @close="closeBox" :card="subject.cardNumber"></shareAnswerBox>

  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import questionAudio from "./components/questionAudio";
import shareAnswerBox from "@/components/shareAnswerBox";

import fillWord from "./components/fillWord";
import selectOption from "./components/selectOption";
import { shareInfo } from "@/config/shareInfo";
const dataStack = []; //初始数据备份
export default {
  components: {
    questionAudio, //音频组件
    fillWord, //填字组件
    selectOption, //选项组件
    shareAnswerBox
  },
  data() {
    return {
      shareInfo: shareInfo,
      imgSize: "",
      isPass: false, //控制填字 提示 正确以后 不能在提示
      isPaused: true, //光盘动画开关
      isExit: 1, //判断是否真退出或者10关自动退出
      isFly: false, //添加提示动画,
      subject: {}, //题目信息,
      shareUser: {},
      qType: 0, //题目类型，1:图文，2：音文 3: 纯文字
      sType: 0, //选项类型 1：选项，2：选字
      auidioContext: null,
      isShareAnswerBox: false, //答题结果弹窗
      resultType: "ten" //答题结果
      // tipCost:0,//
    };
  },
  computed: {
    ...mapState(["IMGHEAD", "appInfo", "globalAudioContext", "sysConfig"])
  },
  methods: {
    ...mapMutations(["setEnergy"]),
    imgLoaded(event) {
      let width = event.target.width,
        height = event.target.height;
      let nw, nh;
      if (height >= 424) {
        nh = 424;
        nw = width * (nh / height);
      } else {
        nw = 660;
        nh = height * (nw / width);
      }
      this.imgSize = `width:${nw}rpx;height:${nh}rpx;`;
    },
    initAudio() {
      this.auidioContext = wx.createInnerAudioContext();
      this.auidioContext.volume = 1;
      this.auidioContext.src = "static/audio/wrong.mp3";
    },
    playAudio(url) {
      this.auidioContext.src = url;
      this.auidioContext.play();
    },
    stopAudio() {
      this.auidioContext.stop();
    },
     getSubject() {
      //获取题目信息
      //初始化数据
      this.answerCount = 0;
       this.fly
        .post("/getSubject", {
          userId: this.$root.$mp.query.userId || 0,
          subjectId: this.$root.$mp.query.subjectId || 0
        })
        .then(res => {
          if (res.data.Tag == -4) {
            console.log("-4")
            wx.showToast({
              title:"已经回答过该题目",
              icon:"none",
              duration:1000
            })
            setTimeout(()=>{
              this.$router.replace("/pages/question/mainPlay");
            },1000)
          } else {
            this.subject = res.data.Result;
            this.shareUser = res.data.Result2;
            this.qType = res.data.Result.modeType;
            this.sType = res.data.Result.type;
            this.setEnergy(res.data.Result.strengthCount);
            // 背景音乐设置
            if (this.qType == 2) {
              this.globalAudioContext.stop();
              this.setGlobalAudioType("stop");
            } else if (this.setGlobalAudioType == "stop") {
              this.globalAudioContext.play();
              this.setGlobalAudioType("play");
            }
          }
        });
    },
    closeBox() {
      this.isShareAnswerBox = false;
      this.$router.replace("/pages/question/mainPlay");
    },
    successHandle(answer) {
      //答对  显示答对弹窗，点击后 回到首页 或者自己的答题页
      this.playAudio("static/audio/right.mp3");
      this.resultType = "success";
      this.isShareAnswerBox = true;
      this.fly
        .post("/submitShareSubject", {
          userId: this.$root.$mp.query.userId,
          subjectId: this.$root.$mp.query.subjectId,
          answer: answer,
          cardNumber: this.subject.cardNumber
        })
        .then(res => {
          console.log("提交正确答案");
        });
    },
    failHandel(type) {
      //回答错误 弹出回答错误弹窗 提示需要回答十关， 关闭 回到答题页
      this.isShareAnswerBox = true;
      this.resultType = "fail";
      this.playAudio("static/audio/wrong.mp3");
      this.fly
        .post("/submitShareSubject", {
          userId: this.$root.$mp.query.userId,
          subjectId: this.$root.$mp.query.subjectId,
          answer: "错误答案+",
          cardNumber: this.subject.cardNumber
        })
        .then(res => {
          console.log("提交错误答案");
        });
    }
  },
  onLoad(options) {
    dataStack.push({ ...this.$data });
  },
  onUnload() {
    // this.exit();
    Object.assign(this.$data, dataStack.pop());
  },
   mounted() {
    this.initAudio();
     this.getSubject();
  },
  // onHide() {
  // },
  onShareAppMessage: function(res) {
    let x = Math.ceil(Math.random() * 7);
    return {
      title: this.shareInfo[x - 1].text,
      imageUrl: this.shareInfo[x - 1].url,
      path:
        "/pages/entry/index?userId=" +
        this.appInfo.userId +
        "&subjectId=" +
        this.subject.id,
      success: res => {
        this.fly
          .post("/updateStrength", {
            count: this.tipEnergy,
            type: 0
          })
          .then(res => {
            this.setEnergy(res.data.Result);
            if (res.data.Result >= this.sysConfig.maxEnergy) {
              wx.showToast({
                title: "金币已达上限",
                icon: "none"
              });
            } else {
              wx.showToast({
                title: "分享成功,金币+30",
                icon: "none"
              });
            }
          });
      }
    };
  }
};
</script>

<style lang="scss" scoped>
.wrap {
  min-height: 100%;
  font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC",
    "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei";
  background-size: 750rpx 1206rpx;
  background-repeat: no-repeat;
  background-color: #fcda7b;
  background-image: url("");
}
.head{
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30rpx;
  color:#fff;
  margin-bottom: 50rpx;
  box-sizing: border-box;
  img{
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
  }
  .name{
    font-weight: bold;
    font-size: 34rpx;
    color:#f8ea48;
    margin:0 10rpx;
  }
}

// 题目 标题
.question-title {
  width: 100%;
  padding: 24rpx 0 0 auto;
  font-size: 36rpx;
  text-align: center;
  color: #fff;
  line-height: 1;
}

.word {
  color: transparent;
  width: 628rpx;
  height: 262rpx;
  margin: 24rpx auto 45rpx;
  background: transparent;
  border: 4rpx solid #fbcdd3;
  padding: 10rpx 14rpx;
  box-sizing: border-box;
  position: relative;
  .title-box {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 608rpx;
    height: 238rpx;
    line-height: 1.5em;
    // content: attr(data-title);
    color: #c73e5f;
    font-weight: bold;
    padding: 0 70rpx;
    box-sizing: border-box;
    background: #fbcdd3;
  }
  // &:after {
  //   position: absolute;
  //   left: 50%;
  //   top: 50%;
  //   transform: translate(-50%, -50%);
  //   display: flex;
  //   align-items: center;
  //   justify-content: center;
  //   width: 608rpx;
  //   height: 238rpx;
  //   line-height: 1.5em;
  //   content: attr(data-title);
  //   color: #c73e5f;
  //   font-weight: bold;
  //   padding: 0 70rpx;
  //   box-sizing: border-box;
  //   background: #fbcdd3;
  // }
}
// 图片提示
.question-img {
  width: 660rpx;
  height: 424rpx;
  display: flex;
  margin: 38rpx auto 38rpx;
  justify-content: center;
  align-items: center;
  img {
    max-width: 660rpx;
    max-height: 424rpx;
    border: 8rpx solid #fff;
    vertical-align: top;
    border-radius: 8rpx;
    transition: all 0.2s ease;
  }
}

// 功能操作区域
.fn-box {
  display: flex;
  justify-content: center;
  // align-items: center;
  margin-bottom: 6rpx;
  .fn-btn {
    position: relative;
    &:active {
      transform: scale(0.8);
    }
  }
  img {
    width: 172rpx;
    height: 95rpx;
  }
  button {
    border: none;
    margin: 0;
    padding: 0;
    line-height: 0;
  }
}
.sub-animate {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: -1;
  opacity: 0;
  img {
    width: 56rpx;
    height: 56rpx;
    margin-right: 10rpx;
  }
  font-size: 30rpx;
  font-weight: bold;
  color: #fff;
}
.flyUp {
  z-index: 5;
  animation: fly 1s ease;
  opacity: 1;
}
@keyframes fly {
  0% {
    // opacity: 1;
    transform: translateY(0);
  }
  100% {
    transform: translateY(-100rpx);
    // opacity: 0;
  }
}
.mt34 {
  margin-top: 26rpx;
}
</style>
